<template>
<div class="register">
    <!-- 注册顶部  返回 -->
    <div class="header">
        <router-link to="/login"><&lt;登录</router-link>
    </div>
    <!-- 注册 -->
    <div class="reg">注册</div>
    <form action="" method="">
    <!-- 注册过程 -->
    <div class="input">
        <!--用户名-->
        <div>
            <i class="iconfont icon-user"></i>
            <input type="text" @keyup="person" @focus="personal" v-model="per" name="username" placeholder="请输入用户名">
        </div>
        <!--用户名提示信息-->
        <div class="show"><span v-show="is_show">{{text1}}</span></div>
        <!--密码-->
        <div>
            <i class="iconfont icon-mima"></i>
            <input type="password" @focus="word1" @keyup="pword1" v-model="pas1" name="password" placeholder="请填写密码">
        </div>
        <!--密码提示文本-->
        <div class="show"><span v-show="is_hide1">{{text2}}</span></div>
        <!--确认密码-->
        <div>
            <i class="iconfont icon-mima"></i>
            <input type="password" @focus="word2" @keyup="pword2" v-model="pas2" name="password" placeholder="请确认密码">
        </div>
        <!--确认密码提示文本及已经有账号-->
        <div>
            <div class="show"><span v-show="is_hide2">{{text3}}</span></div>
            <router-link to="/login">已经有账号？去登录>></router-link>
        </div>
    </div>
    <!-- 注册按钮  协议 -->
    <div class="zhuce">
        <div>
            <input @click.prevent="reg" :class="{color1:true,color2:!all}" type="submit" value="注册">
        </div>
        <div>
            <!--协议提示文本-->
            <div v-if="coling">请先勾选用户协议</div>
            <!--协议多选框-->
            <input type="checkbox" @click="agreement" v-model="stat" name="" id="protocol"><label for="protocol">注册使用即表示同意 <router-link to="">用户协议及版权声明</router-link></label>
        </div>
    </div>
    </form>
    <!-- 底部风景 -->
    <div class="end">
        <i class="iconfont icon-fengjing"></i>
        <i class="iconfont icon-fengjingmingsheng"></i>
        <i class="iconfont icon-shatanyezishulvyoufengjingxianxing"></i>
    </div>
</div>
</template>
<style scoped src="../../public/css/register.css"></style>
<script>
    export default {
        data(){
            return {
                //  控制用户名提示显示隐藏
                is_show:false,
                //  控制密码提示显示隐藏
                is_hide1:false,
                //  控制确认密码提示显示隐藏
                is_hide2:false,
                //  用户名value
                per:'',
                //  密码value
                pas1:'',
                //  确认密码value
                pas2:'',
                //  用户名提示内容
                text1:'请输入6-10由数字字母下划线组成的用户名',
                //  密码提示内容
                text2:'请输入6位数字密码',
                //  确认密码提示内容
                text3:'请确认密码',
                //  控制协议被勾选
                stat:false,
                //   控制注册按钮点击
                all:true,
                //  控制勾选协议提示显示隐藏
                coling:false
            }
        },
        methods:{
            //  用户聚焦
            personal(){
                if (this.per==""){
                    //  提示文本显示
                    this.is_show=true;
                }
            },
            //  用户输入改变
            person(){
                //  6-10位数字字母下划线正则
                let reg=/^\w{6,10}$/ig;
                if (this.per=="") {
                    //  提示文本显示
                    this.is_show=true;
                    this.text1='用户名为空'
                }else {
                    if (reg.test(this.per)){
                        //  满足正则，发起请求服务器对比是否存在该用户
                        this.$axios.post('http://118.178.85.166:3000/login',{username:this.per,met:2}).then((data)=>{
                            //  全部数据
                            let Data=data.data;
                            //  用户名已存在
                            if (Data.code==300){
                                this.is_show=true;
                                this.text1=Data.msg;
                            }else {
                                //  提示文本消失
                                this.is_show=false;
                            }
                        }).catch((err)=>{
                            console.log('这是注册输入用户名中的错误:'+err);
                        });
                        //  满足正则，提示文本消失
                        this.is_show=false;
                    } else {
                        //  提示文本显示
                        this.is_show=true;
                        this.text1='请输入6-10由数字字母下划线组成的用户名'
                    }
                }
            },
            //  密码聚焦
            word1(){
                if (this.pas1==""){
                    //  密码提示文本显示
                    this.is_hide1=true;
                }
            },
            //  密码输入改变
            pword1(){
                //  6位数字密码正则
                let reg=/^\d{6}$/ig;
                if (this.pas1=="") {
                    //  提示文本显示
                    this.is_hide1=true;
                    this.text2='密码为空';
                }else {

                    if (reg.test(this.pas1)){
                        //  提示文本消失
                        this.is_hide1=false;
                    } else {
                        //  提示文本显示
                        this.is_hide1=true;
                        this.text2='请输入6位数字密码'
                    }
                }
            },
            //  确认密码聚焦
            word2(){
                if (this.pas1=='') {
                    //  确认密码提示文本显示
                    this.is_hide1=true;
                    this.text2='请输入6位数字密码'
                }else {
                    //  密码是否为空
                    if (this.pas2==""){
                        //  提示文本显示
                        this.is_hide2=true;
                    }
                }
            },
            //  确认密码输入改变
            pword2(){
                if (this.pas1==''){
                    this.is_hide2=true;
                    this.text3='请与上面密码保持一致'
                } else {
                        if (this.pas2=="") {
                            //  提示文本显示
                            this.is_hide2=true;
                            this.text3='确认密码为空'
                        }else {
                            if (this.pas1===this.pas2){
                                //  提示文本消失
                                this.is_hide2=false;
                            } else {
                                //  提示文本显示
                                this.is_hide2=true;
                                this.text3='请与上面密码保持一致'
                            }
                        }
                    }
            },
            //  勾选用户协议
            agreement(){
              if (this.stat){
                  //  注册按钮变成青色且可发起请求
                  this.all=true;
                  //  用户协议提示文本隐藏
                  this.coling=false;
              } else {
                  //  注册按钮变成灰色且不可发起请求
                  this.all=false;
                  //  用户协议提示文本隐藏
                  this.coling=false;
              }
            },
            //  点击注册按钮
            reg(){
                //  用户协议被勾选
                if (this.stat){
                    //  隐藏协议提示文本
                    this.coling=false;
                    //  用户名为空
                    if (this.per==''){
                        this.is_show=true;
                        this.text1='用户名为空'
                        //  密码为空
                    }else if (this.pas1==''){
                        this.is_hide1=true;
                        this.text2='密码为空'
                        //  确认密码为空
                    }else if (this.pas2==''){
                        this.is_hide2=true;
                        this.text3='确认密码为空'
                        //  三条提示文本均为隐藏
                    }else if (this.is_show==false&&this.is_hide1==false&&this.is_hide2==false){
                        //  发起后端请求数据
                        this.$axios.post('http://118.178.85.166:3000/login',{username:this.per,password:this.pas1,met:3}).then((data)=>{
                            //  全部数据
                            let Data=data.data;
                            if (Data.code==200){
                                //  注册成功
                                alert(Data.msg);
                                this.$router.push('/login')
                            }
                            if (Data.code==300){
                                //  用户名已存在
                                this.is_show=true;
                                this.text1=Data.msg;
                            }
                        }).catch((err)=>{
                            console.log('这是点击注册按钮的错误:'+err);
                        });
                    }
                }else {
                    //  用户协议提示文本显示
                    this.coling=true;
                }
            }

        },

    }
</script>
